<script setup lang="ts">
import { ref,reactive,onMounted } from "vue";
 const data = reactive({
      categoryInfo: {},
      category: [{}],
      categoryChild: [{}]
    });

    onMounted(() => {
      setTimeout(() => {
        getData();
      }, 500);
    });

    const getData = () => {
      fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
        .then((response) => response.json())
        .then((res) => {
          const { categoryInfo, categoryChild } = res;
          data.categoryInfo = categoryInfo;
          data.category = categoryInfo.category;
          data.categoryChild = categoryChild;
        })
        .catch((err) => console.log('Oh, error', err)); 
    };

    const change = (index: any) => {
      data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children as any);
    };
    const onChange =()=>{
        console.log("当前分类数据");
    }
</script>

<template>
  <nut-config-provider  >
     <nut-category :category="data.category" @change="change">
    <nut-categorypane :categoryChild="data.categoryChild" @onChange="onChange">
    </nut-categorypane>
  </nut-category>
  </nut-config-provider>
</template>

<style>
 
</style>
